<template>
  <div class="Members-card-main">
    <el-card shadow="always" class="userList" is="transition-group" name="Members" appear>
      <el-card class="userInfo" shadow="hover" v-for="user in userInfoList" :key="user.id">
        <el-divider>
          <el-avatar :size="100"
            :src="(user.img_url ?('http://www.aynu.xyz:8000' + user.img_url) : 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png')">
          </el-avatar>
        </el-divider>
        <p class="userName">{{user.user_name}}</p>
      </el-card>
    </el-card>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        userInfoList: [],
      }
    },
    created() {
      this.getMembersList()
    },
    methods: {
      getMembersList: async function () {
        const {
          data: res
        } = await this.$http.get('/members')
        if (res.meta.success == false) return this.$message.error(res.meta.message)
        this.userInfoList = res.data
      }
    }

  }

</script>

<style lang="less">
  //成员列表主体区域
  .Members-card-main {
    height: 0;
    min-height: 100%;
    //卡片主体区域
    .el-card {
      min-height: 100%;
      font-size: 20px;
      text-align: center;
      font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;

      //分割线
      .el-divider {
        margin: 100px 0;
      }

    }

    //用户列表
    .userList {

      //卡片内容区域
      .el-card__body {
        display: flex;
        flex-flow: row wrap;

        //单个用户信息
        .userInfo {
          width: 220px;
          height: 280px;
          margin: 10px;
          text-align: center;
          overflow: hidden;

          //用户名
          .userName {
            width: 100%;
          }
        }
      }
    }

    .Members-enter,
    .Members-leave-to {
      opacity: 0;
    }

    .Members-enter-active,
    .Members-leave-active {
      transition: all 1s;
    }
  }

</style>
